<template>
	<view>
		<view class="animation-fade container bg-grey">
			<view class="top-container animation-slide-right">
				<image class="bg-img" src="https://cdn.quasar.dev/img/mountains.jpg"></image>
				<!-- <view class="heard"><text>我</text></view> -->
				<view class="item-info item-nav tui-fixed">
					<view class="float-left"><tui-icon @click="backToUp" name="arrowleft" color="black" size="40rpx"></tui-icon></view>
					<view class="float-right" style="margin-right: 30rpx;"><tui-icon name="camera-fill" color="black" size="40rpx"></tui-icon></view>
				</view>
				<view class="user-wrapper">
					<view class="user">
						<image class="avatar-img" src="https://cdn.quasar.dev/img/avatar.png"></image>
						<text class="user-info-mobile">Geez</text>
					</view>
				</view>
			</view>
			<view class="middle-container animation-slide-left">
				<block v-for="(msg, index) in SHQMsgList" :key="index">
					<tui-card class="card" :image="msg.img" :title="msg.title" :full="true" :header="msg.header" :border="true" @click="" @longclick="">
						<template v-slot:body>
							<view class="tui-content" v-if="msg.content">{{ msg.content }}</view>
							<view class="tui-default tui-flex-pic">
								<block v-if="msg.imgs && msg.imgs.length > 0"><image v-for="img in msg.imgs" :src="img" mode="widthFix"></image></block>

								<view class="item-info">
									<view class="tui-default" v-if="msg.location">
										<text class="text-10">{{ msg.location.remark }}</text>
									</view>
									<view class="item-action float-left">
										<text class="tui-color-gray text-20 time-item">{{ msg.time }}</text>
									</view>
									<view class="float-right item-action"><tui-icon name="more-fill" bold size="16"></tui-icon></view>
								</view>
								<scroll-view scroll-y class="item-zan bg-grey" v-if="msg.zanList && msg.zanList.length > 0">
									<tui-icon class="float-left" name="agree" bold size="15" color="black"></tui-icon>
									<div class="float-left" v-for="item in msg.zanList">
										<tui-tag type="grey" padding="10rpx" plain hover size="15rpx" :index="item.id">{{ item.name }}</tui-tag>
									</div>
								</scroll-view>
								<scroll-view scroll-y class="item-pinglun bg-grey text-20" v-if="msg.pingLunList && msg.pingLunList.length > 0">
									<view v-for="item in msg.pingLunList" class="item-pinglun-text">
										<text class="item-pinglun-text-talk">{{ item.name }}</text>
										<text v-if="item.atUser">回复</text>
										<text class="item-pinglun-text-talk" v-if="item.atUser">{{ item.atUser }}</text>
										：
										<text class="item-pinglun-text-remark">{{ item.remark }}</text>
									</view>
								</scroll-view>
							</view>
						</template>
					</tui-card>
				</block>
			</view>
			<view class="bottom-container text-grey text-10 text-center ">By CodeBerder..</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {};
	},
	computed: {
		SHQMsgList() {
			return this.$store.getters.sHQMsgListGetter;
		}
	},
	methods: {
		backToUp() {
			uni.navigateBack();
		}
	}
};
</script>

<style scoped>
.container {
	height: 100vh;
	position: relative;
}
.top-container {
	height: 344rpx;
	position: relative;
	display: flex;
	flex-direction: column;
}

.bg-img {
	position: absolute;
	width: 100%;
	height: 350rpx;
}
.item-nav {
	top: 0;
	position: absolute;
	z-index: 2;
	height: 60rpx;
	padding: 10rpx;
}
.item-nav-left {
	justify-self: flex-start;
}
.item-nav-right {
	justify-self: flex-end;
}
.user-wrapper {
	display: flex;
	margin-top: 180rpx;
	justify-content: flex-end;
	position: relative;
	z-index: 2;
}
.user {
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 2;
}
.user-info-mobile {
	margin-top: 10rpx;
	position: relative;
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
	align-self: center;
	padding: 0 50rpx;
}
.avatar-img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	align-self: center;
}
.middle-container {
	flex-direction: column;
	border-radius: 10rpx;
	background-color: #ffffff;
	position: relative;
	z-index: 2;
}
.tui-content {
	padding: 0rpx 30rpx 20rpx 120rpx;
	box-sizing: border-box;
	font-size: 25rpx;
	font-weight: 400;
	color: #333;
}
.tui-default {
	padding-left: 10rpx;
}
.time-item {
	margin-left: 10rpx;
}
.item-info {
	width: 100%;
}
.item-action {
	padding-left: 10rpx;
	padding-right: 20rpx;
	margin-top: -10rpx;
}
.item-pinglun {
	width: 100%;
	max-height: 300rpx;
	margin-top: -10rpx;
	margin-bottom: 20rpx;
	padding: 10rpx;
}
.item-zan {
	width: 100%;
	max-height: 300rpx;
	margin-top: 2rpx;
	margin-bottom: 20rpx;
	padding: 10rpx;
}
.item-pinglun-text {
	padding: 5rpx;
}
.item-pinglun-text-talk {
	color: #5677fc;
}
.item-pinglun-text-remark {
	color: #000000;
}

.tui-flex-pic {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: wrap;
	box-sizing: border-box;
	background: #fff;
	padding: 0 120rpx;
}
.card {
	margin-top: 10rpx;
}

.tui-flex-pic image {
	width: 32%;
	margin-bottom: 2%;
}
</style>
